{extend name="public/base" /}
{block name="body"}
<!-- 内容区域 -->
<div class="content-wrapper">

  <!-- 内容头部 -->
  <section class="content-header">
    <h1>
      修改信息
      <small>首页</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
    </ol>
  </section>
  <!-- 内容头部 /-->

  <!-- 正文区域 -->
  <section class="content">
  <div class="row">
    <div class="col-md-8">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">个人信息</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form id="updForm" role="form" method="post">
          <div class="box-body">
            <div class="form-group">
              <label for="exampleInputEmail1">Name</label>
              <input type="text" class="form-control" id="name" value="{$name}" disabled>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Region</label>
              <input type="text" class="form-control" id="region" value="{$region}" disabled>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Email</label>
              <input type="email" name="email" class="form-control" value="{$email}">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Mobile</label>
              <input type="text" name="mobile" class="form-control" value="{$mobile}">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">RegTime</label>
              <input type="text" class="form-control" value="{$regTime}" disabled>
            </div>
          </div>
          <!-- /.box-body -->

          <div class="box-footer">
            <button onclick="updSubmit()" type="button" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  </section>
  <!-- 正文区域 /-->

</div>

<!-- 底部导航 -->
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>Version</b> 1.0.8
  </div>
  <strong>Copyright &copy; 2014-2017 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->

</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}

<script>

  $(document).ready(function() {
    // 选择框
    $(".select2").select2();

    // WYSIHTML5编辑器
    $(".textarea").wysihtml5({
      locale: 'zh-CN'
    });
  });


  // 设置激活菜单
  function setSidebarActive(tagUri) {
    var liObj = $("#" + tagUri);
    if (liObj.length > 0) {
      liObj.parent().parent().addClass("active");
      liObj.addClass("active");
    }
  }


  // 设置激活菜单
  function setSidebarActive(tagUri) {
    var liObj = $("#" + tagUri);
    if (liObj.length > 0) {
      liObj.parent().parent().addClass("active");
      liObj.addClass("active");
    }
  }

  // 激活导航位置
  setSidebarActive("admin-home");

  var commonUtil = {
    /**
     * 弹出消息框
     * @param msg 消息内容
     * @param type 消息框类型（参考bootstrap的alert）
     */
    alert: function(msg, type){
      if(typeof(type) =="undefined") { // 未传入type则默认为success类型的消息框
        type = "success";
      }
      // 创建bootstrap的alert元素
      var divElement = $("<div></div>").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-3').addClass('col-md-offset-4');
      divElement.css({ // 消息框的定位样式
        "position": "absolute",
        "top": "80px"
      });
      divElement.text(msg); // 设置消息框的内容
      // 消息框添加可以关闭按钮
      var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
      $(divElement).append(closeBtn);
      // 消息框放入到页面中
      $('body').append(divElement);
      return divElement;
    },

    /**
     * 短暂显示后上浮消失的消息框
     * @param msg 消息内容
     * @param type 消息框类型
     */
    message: function(msg, type) {
      var divElement = commonUtil.alert(msg, type); // 生成Alert消息框
      var isIn = false; // 鼠标是否在消息框中

      divElement.on({ // 在setTimeout执行之前先判定鼠标是否在消息框中
        mouseover : function(){isIn = true;},
        mouseout  : function(){isIn = false;}
      });

      // 短暂延时后上浮消失
      setTimeout(function() {
        var IntervalMS = 20; // 每次上浮的间隔毫秒
        var floatSpace = 60; // 上浮的空间(px)
        var nowTop = divElement.offset().top; // 获取元素当前的top值
        var stopTop = nowTop - floatSpace;    // 上浮停止时的top值
        divElement.fadeOut(IntervalMS * floatSpace); // 设置元素淡出

        var upFloat = setInterval(function(){ // 开始上浮
          if (nowTop >= stopTop) { // 判断当前消息框top是否还在可上升的范围内
            divElement.css({"top": nowTop--}); // 消息框的top上升1px
          } else {
            clearInterval(upFloat); // 关闭上浮
            divElement.remove();    // 移除元素
          }
        }, IntervalMS);

        if (isIn) { // 如果鼠标在setTimeout之前已经放在的消息框中，则停止上浮
          clearInterval(upFloat);
          divElement.stop();
        }

        divElement.hover(function() { // 鼠标悬浮时停止上浮和淡出效果，过后恢复
          clearInterval(upFloat);
          divElement.stop();
        },function() {
          divElement.fadeOut(IntervalMS * (nowTop - stopTop)); // 这里设置元素淡出的时间应该为：间隔毫秒*剩余可以上浮空间
          upFloat = setInterval(function(){ // 继续上浮
            if (nowTop >= stopTop) {
              divElement.css({"top": nowTop--});
            } else {
              clearInterval(upFloat); // 关闭上浮
              divElement.remove();    // 移除元素
            }
          }, IntervalMS);
        });
      }, 1500);
    }
  }

  function updSubmit() {
    $.ajax({
      url: "../index/doUpdMes",
      data: $('#updForm').serialize(),
      async: false,
      type: "post",
      success: function(result) {
        commonUtil.message("已成功修改"); // 直接调用commonUtil对象的message方法
      }
    })
    //延迟刷新界面
    setTimeout(function (){
      location.reload()
    },2400)
  }

</script>
</body>

</html>
<!---->

{/block}